<template>
  <v-main>
    <!--    step 0 开屏页-->
    <v-container v-if="!scores">
      <v-row align="center" justify="center" class="mt-15">
        <v-spacer></v-spacer>
        <v-col cols="auto">
          <v-avatar size="160">
            <v-img width="160px" height="160px" src="@/assets/logo-128.jpg"></v-img>
          </v-avatar>
        </v-col>
        <v-spacer></v-spacer>
      </v-row>
      <v-row align="center" justify="center" class="mt-15">
        <v-col cols="7" class="mt-10">
          <v-btn color="primary" rounded x-large width="100%" to="/skinTest">开始肤质检测</v-btn>
        </v-col>
      </v-row>
    </v-container>
    <!--    step 1 肤质报告-->
    <v-app-bar
        class="text-center"
        flat
        fixed
        align="center"
        height="60px"
        v-if="scores"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="3" class="text-left pl-0">
            <v-btn elevation="0" class="ml-n3" rounded to="/skinTest">
              再测一次
            </v-btn>
          </v-col>
          <v-col cols="6">
            <div class="mt-2">
              {{ username }}
            </div>
          </v-col>
          <v-col cols="3" class="text-right pr-0">
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>
    <v-container v-if="scores" class="mt-15">
      <v-row justify="center">
        <v-col cols="auto">
          <v-avatar size="85" color="grey lighten-3">
            <img
                :src="$store.getters.getAvatar"
            >
          </v-avatar>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="3" class="text-center" v-for="(s,i) in scores" :key="i">
          <v-avatar size="65" class="little_pink">
            <v-card-subtitle class="main-color pa-0 ma-0">
              {{ s }}
            </v-card-subtitle>
          </v-avatar>
        </v-col>
      </v-row>
    </v-container>
    <v-divider v-if="scores" class=" mx-3"></v-divider>
    <v-container v-if="scores">
      <v-row justify="center" :class="moreInfo?'':'less-text'">
        <v-col cols="auto" class="">
          <div class="font-weight-bold text-center">护肤报告&指南</div>
          <div v-for="r in reports">
            <v-card-subtitle class="py-1 font-weight-bold main-color">{{ r.question }}
              <svg class="pt-1" xmlns="http://www.w3.org/2000/svg" width="21.564" height="12.323"
                   viewBox="0 0 21.564 12.323">
                <g id="组_442" data-name="组 442" transform="translate(-64 -256)">
                  <path id="路径_931" data-name="路径 931"
                        d="M70.161,262.161m-6.161,0A6.161,6.161,0,1,0,70.161,256,6.161,6.161,0,0,0,64,262.161Z"
                        fill="#ffc5a6"/>
                  <path id="路径_932" data-name="路径 932"
                        d="M454.161,262.161m-6.161,0A6.161,6.161,0,1,0,454.161,256,6.161,6.161,0,0,0,448,262.161Z"
                        transform="translate(-374.758)" fill="#ff6c1e"/>
                </g>
              </svg>
            </v-card-subtitle>
            <p class="text-caption mb-0" style="text-indent: 2em" v-for="item in r.results" :key="item">{{ item }}</p>
          </div>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="auto" class="ml-auto py-0">
          <div class="text-caption">
            <span class="main-color" @click="moreInfo=true" v-if="!moreInfo">查看更多</span>
            <span class="main-color" @click="moreInfo=false" v-else>收起更多</span>
            <v-icon color="primary" v-if="!moreInfo">mdi-chevron-right</v-icon>
            <v-icon color="primary" v-else>mdi-chevron-left</v-icon>
          </div>
        </v-col>
      </v-row>
    </v-container>
    <v-divider v-if="scores" class="mb-15 mx-3"></v-divider>

  </v-main>
</template>
<script>
import {reports} from "../util/skinTestQuestions";

export default {
  name: "Skin",
  data: () => ({
    scores: undefined,
    username: '我的肤质',
    reports: [],
    moreInfo: false,
  }),
  methods: {},
  mounted() {
    this.scores = this.$store.getters.getScores
    if (this.scores) {
      let type = this.scores.map(a => a.split(':')[0]).join("")
      this.scores = this.scores.map(a => a.split(':')[1])
      this.reports = reports[type]
    }

  }
}
</script>

<style scoped>
.little_pink {
  background-color: #F6F0FD
}

.less-text {
  height: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>
